/* 滑动条 */

.inputRange {
    --controlLen: 386;
    /* 轨道长度 */
    /* --trackWide: 386px; */
    --trackWide: calc(var(--controlLen, 386) * 1px);
    /* 轨道高度 */
    /* --trackHigh: 30px; */
    --trackHigh: calc(var(--trackWide) * 0.0777);
    /* 滑块直径 */
    /* --thumbDiameter: 24px; */
    --thumbDiameter: calc(var(--trackWide) * 0.0622);
    /* 轨道颜色 */
    --trackColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 轨道阴影 */
    --trackShadow: var(--ShadowBlue, rgba(0, 0, 0, 0.25));
    /* 滑块颜色 */
    --thumbColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 覆盖颜色 */
    --coverColor: var(--StandardBlue, rgba(64, 96, 255, 1));

    width: fit-content;
    position: relative;
    margin: calc(var(--trackHigh) * 0.25);
    touch-action: none;
}

.inputRange label {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 清除默认样式 */
.inputRange input[type="range"] {
    appearance: none;
    position: absolute;
    background-color: transparent;
    width: var(--trackWide);
    height: var(--trackHigh);
}

/* 轨道样式 */
.inputRange .track {
    display: inline-block;
    width: calc(var(--trackWide) - var(--thumbDiameter));
    height: var(--trackHigh);
    background-color: var(--trackColor);
    box-shadow: 0px 2px 4px var(--trackShadow);
    border-radius: calc(var(--trackHigh) * 0.25);
}

/* 滑块样式 */
.inputRange input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: var(--thumbDiameter);
    height: var(--thumbDiameter);
    border-radius: calc(var(--thumbDiameter) * 0.5);
    border: calc(var(--thumbDiameter) * 0.1) solid var(--coverColor);
    background-color: var(--thumbColor);
    transition: .3s all;
}

.inputRange input[type="range"]:active::-webkit-slider-thumb {
    height: calc(var(--thumbDiameter) * 1.5);
    width: calc(var(--thumbDiameter) * 0.75);
}

/* 覆盖样式 */
.inputRange .cover {
    display: inline-block;
    width: calc((var(--trackWide) - var(--thumbDiameter)) / 2);
    height: var(--trackHigh);
    background-color: var(--coverColor);
    border-radius: calc(var(--trackHigh) * 0.25);
}